import React, { useRef } from 'react'

// 获取 DOM
export default function App() {
  // #1
  // useRef 创建出来的引用，可以保证每次渲染的适合使用的也是同一个 inputRef
  const inputRef = useRef(null)
  // React.createRef() 创建出来的引用，每次组件渲染都是一个新的
  // const inputRef = React.createRef()

  const handleClick = () => {
    // #3
    // inputRef.current => DOM
    console.log(inputRef.current.value)
  }
  return (
    <div>
      {/* #2 */}
      <input type='text' ref={inputRef} />
      <button onClick={handleClick}>获取内容</button>
    </div>
  )
}

/* function fn() {
  const a = 1
}
fn()
fn() */
